<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>设置头像</title>
		<link rel="stylesheet" href="css/intial.css" />
	</head>
	<body>
		<section class="text-center">
			<div id="headimg" style="background-image:url(img/headbig.png);"></div>
			<span class="btn">点击设置头像</span>
		</section>
		<!--图片裁剪-->
		<div class="photoclip">
		<div class="clipbg-shade displaynone"></div>
		<div class="clipbg displaynone">
			<div id="clipArea"></div>
			<div class="loading displaynone">正在载入图片...</div>
			<div class="clipbg-outer">
				<div class="footer">
		            <p>(温馨提示:滚动鼠标，可以缩放图片大小;双击图片可以按顺序旋转图片)</p>
					<dl>
						<dd>
							<a href="javascript:void(0)">上传图片<input type="file" class="input" id="file" accept="image/*"></a>
						</dd>
						<dd id="clipBtn"><input type="button" class="btns" value="完成裁剪" /></dd>
					</dl>
		
				</div>
		
			</div>
			<div class="close-back">取消</div>
		</div>
		</div>
	</body>
	<script type="text/javascript" src="http://testwww.9mitao.com/layui_live/lay/lib/jquery.min.js"></script>
	<script type="text/javascript" src="js/hammer.min.js" ></script>
	<script type="text/javascript" src="js/lrz.all.bundle.js" ></script>
	<script type="text/javascript" src="js/iscroll-zoom-min.js" ></script>
	<script type="text/javascript" src="js/PhotoClip.js" ></script>
	<script>
		var clipArea = new PhotoClip("#clipArea", {
			size: [360, 270], //裁剪框大小
			outputSize: [360, 270], //打开图片大小，[0,0]表示原图大小
			file: "#file",
			ok: "#clipBtn",
			loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
				$(".loading").removeClass("displaynone");
			},
			loadComplete: function() { //图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
				$(".loading").addClass("displaynone");
			},
			done: function(imgBase64) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。			
				console.log(imgBase64); //imgBase64裁剪后图片地址base64格式提交给后台处理
				onSubmit(imgBase64); //
				$('#headimg').css('background-image','url( '+imgBase64+')');
				$(".clipbg").fadeOut();
				$('.clipbg-shade').fadeOut();
			}
		});
		function DataURIToBlob(dataURI) {
	        const splitDataURI = dataURI.split(',')
	        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
	        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

	        const ia = new Uint8Array(byteString.length)
	        for (let i = 0; i < byteString.length; i++)
	            ia[i] = byteString.charCodeAt(i)

	        return new Blob([ia], { type: mimeString })
    	}
		function onSubmit(imgBase64){
			const file = DataURIToBlob(imgBase64)
			const formData = new FormData();
			formData.append('file', file, 'image.jpg') 
			$.ajax({
				url: "http://localhots/upload",
				type: 'POST',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				enctype: 'multipart/form-data'
			}).done(function (res) {
				console.log(res);
			}).fail(function (res) {
				console.log(res)
			});
		}
		$(".btn").click(function() {
			$(".clipbg").fadeIn();
			$('.clipbg-shade').fadeIn();
		})
		$(".close-back").click(function() {
			$(".clipbg").fadeOut();
			$('.clipbg-shade').fadeOut();
		})
	</script>

</html>